<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div style="margin-bottom: 10px;">
      <span style="font-weight: bold">单据类型：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.receiptsTypeList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="onChangeReceiptsType(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
    </div>

    <!--<div style="margin-bottom: 10px;">
      <span style="font-weight: bold">单据时间：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.receiptsDateList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="onChangeReceiptsDate(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
      <a-range-picker v-show="this.currentKey" @change="onChangeCustomerReceiptsDate" format="YYYY-MM-DD"
                      v-model:value="dateValue"/>
    </div>-->

    <div style="margin-bottom: 10px;">
      <span style="font-weight: bold">订单状态：</span>
      <a-checkable-tag style="font-size: 14px;margin: 5px;padding: 5px" v-for="(item,index) in this.orderStatusList"
                       :key="index" v-model:checked="item.checkedValue"
                       @change="onChangeOrderStatus(item.key,item.itemValue)">{{item.itemText}}
      </a-checkable-tag>
    </div>

    <!--<div style="margin-bottom: 10px;">
      <a-row>
        <a-col :span="6">
          <a-form-model-item label="供应商" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
            <a-select
              show-search
              :allowClear="true"
              placeholder="请选择供应商"
              option-filter-prop="children"
              v-model="queryParam.supplierName"
              style="width: 100%"
              :filter-option="filterOptionSupplier"
              @change="changeSupplier">
              <a-select-option :value="item.supplierName" v-for="(item,index) in supplierData" :key="index">
                {{item.supplierName}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depositoryName">
            <a-select
              show-search
              :allowClear="true"
              placeholder="请选择仓库"
              option-filter-prop="children"
              v-model="queryParam.depositoryName"
              style="width: 100%"
              :filter-option="filterOptionDepository"
              @change="changeDepository">
              <a-select-option :value="item.depositoryName" v-for="(item,index) in depositoryData" :key="index">
                {{item.depositoryName}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="采购人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
            <a-select
              show-search
              :allowClear="true"
              placeholder="请选择采购人员"
              option-filter-prop="children"
              v-model="queryParam.purchasePeople"
              style="width: 100%"
              :filter-option="filterOptionPurchasePeople"
              @change="changePurchasePeople">
              <a-select-option :value="item.realname" v-for="(item,index) in purchasePeopleData" :key="index">
                {{item.realname}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplier">
            <a-select
              show-search
              :allowClear="true"
              placeholder="请选择创建人"
              option-filter-prop="children"
              v-model="queryParam.createBy"
              style="width: 100%"
              :filter-option="filterOptionCreateBy"
              @change="changeCreateBy">
              <a-select-option :value="item.realname" v-for="(item,index) in createByData" :key="index">
                {{item.realname}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>-->

    <!--<div style="font-size: 25px;margin-top: 10px;margin-bottom: 10px">
      合计：<span style="color: red">￥{{totalPrice.toFixed(2)}}</span>
    </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          offset="100"
          finished-text="没有更多了"
          @load="onLoadList"
          :immediate-check="false"
        >
          <div
            class="customer-list"
            v-for="(item,i) in dataSource"
            :key="i"
            @click="purchaseOrderDetail(item)"
          >
            <div>
              <div class="name">单据编号：{{ item.receiptsNo || '无' }}</div>
              <div class="contact">
                <span>单据日期：{{ item.receiptsTime || '无' }}</span>
              </div>
              <div class="contact">
                <span>供应商：{{ item.supplierName || '无' }}</span>
              </div>
              <div class="contact">
                <span>单据类型：{{ getReceiptsType(item.receiptsType) }}</span>
              </div>
              <div class="contact">
                <span>订单状态：
                  <a-tag v-if="item.orderStatus === 1">草稿</a-tag>
                  <a-tag color="orange" v-if="item.orderStatus === 2">审批中</a-tag>
                  <a-tag color="green" v-if="item.orderStatus === 3">审批通过</a-tag>
                  <a-tag color="red" v-if="item.orderStatus === 4">未通过</a-tag>
                  <a-tag color="magenta" v-if="item.orderStatus === 5">已撤销</a-tag>
                </span>
                <span style="margin-left: 20px">采购人：{{ item.purchasePeople || "无" }}</span>
              </div>
              <div class="contact">
                <span>仓库：{{ item.depositoryName || '无' }}</span>
              </div>
              <div class="contact">
                <span>材料名称：{{item.material.materialName || '无'}}</span>
              </div>
              <!--<div class="contact">
                <span>材料名称：{{item.material.materialName || '无'}}</span>
                <span style="margin-left: 20px">材料名称：{{item.material.materialName || '无'}}</span>
              </div>-->
              <div class="contact">
                <span>成本价：{{item.material.costPrice || '无'}}</span>
                <span style="margin-left: 20px">采购单价：{{item.unitPrice || '无'}}</span>
              </div>
              <div class="contact">
                <span>数量：{{getMaterialNum(item)}}</span>
                <span style="margin-left: 20px">采购金额：{{item.subtotal || '无'}}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>


      <!--<a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <a slot="receiptsNo" @click="purchaseOrderDetail(record)" slot-scope="text,record">{{ text }}</a>
      </a-table>-->
    </div>

    <in-depository-order-detail-modal ref="inDepositoryOrderDetailModal"></in-depository-order-detail-modal>
    <goods-rejected-order-detail-modal ref="goodsRejectedOrderDetailModal"></goods-rejected-order-detail-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { filterObj } from '@/utils/util';
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction,putAction} from "@/api/manage";
  import inDepositoryOrderDetailModal
    from "../../../supplychain/purchaseInDepositoryOrder/modules/inDepositoryOrderDetailModal";
  import goodsRejectedOrderDetailModal
    from "../../../supplychain/purchaseGoodsRejectedOrder/modules/goodsRejectedOrderDetailModal";

  export default {
    name: "purchaseItemList",
    mixins: [JeecgListMixin, mixinDevice],
    components:{
      inDepositoryOrderDetailModal,goodsRejectedOrderDetailModal
    },
    data(){
      return {
        description: '供应链采购订单表管理页面',
        currentKey: false,
        startDate: '',
        endDate: '',
        dateValue: [],
        supplierData: [],   //供应商列表
        depositoryData: [], //仓库列表
        purchasePeopleData:[],  //采购人员列表
        createByData:[],    //创建人列表
        model:{},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '单据编号',
            align: "center",
            dataIndex: 'receiptsNo',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'receiptsNo' },
          },
          {
            title: '单据日期',
            align: "center",
            dataIndex: 'receiptsTime'
          },
          {
            title: '供应商',
            align: "center",
            dataIndex: 'supplierName'
          },
          {
            title: '单据类型',
            align: "center",
            dataIndex: 'receiptsType',
            customRender:function (text) {
              switch (text) {
                case 1:
                  return "采购"
                  break;
                case 2:
                  return "采购入库"
                  break;
                case 3:
                  return "采购退货"
                  break;
                case 4:
                  return "其他入库"
                  break;
                case 5:
                  return "其他出库"
                  break;
                case 6:
                  return "调拨单"
                  break;
              }
            }
          },
          {
            title: '仓库',
            align: "center",
            dataIndex: 'depositoryName'
          },
          {
            title: '采购人员',
            align: "center",
            dataIndex: 'purchasePeople'
          },
          {
            title: '创建人',
            align: "center",
            dataIndex: 'createBy'
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'orderStatus',
            customRender:function (text) {
              switch (text) {
                case 1:
                  return "草稿"
                  break;
                case 2:
                  return "审批中"
                  break;
                case 3:
                  return "审批通过"
                  break;
                case 4:
                  return "未通过"
                  break;
                case 5:
                  return "已撤销"
                  break;
              }
            }
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'material.materialName'
          },
          {
            title: '型号',
            align: "center",
            dataIndex: 'material.modelNumber'
          },
          {
            title: '规格',
            align: "center",
            dataIndex: 'material.specifications'
          },{
            title: '品牌',
            align: "center",
            dataIndex: 'material.brand'
          },
          {
            title: '市场价',
            align: "center",
            dataIndex: 'material.marketPrice',
            customRender:function (text) {
              if (text == null || text == 0){
                return "-";
              }else {
                return text+"元"
              }
            }
          },
          {
            title: '预算价',
            align: "center",
            dataIndex: 'material.estimatedCost',
            customRender:function (text) {
              if (text == null || text == 0){
                return "-";
              }else {
                return text+"元"
              }
            }
          },
          {
            title: '成本价',
            align: "center",
            dataIndex: 'material.costPrice',
            customRender:function (text) {
              if (text == null || text == 0){
                return "-";
              }else {
                return text+"元"
              }
            }
          },
          {
            title: '数量',
            align: "center",
            dataIndex: 'materialNum',
            customRender:function (text, record, index) {
              if (record.receivedNum != null && record.receivedNum != ""){
                return record.receivedNum;
              }else if (record.goodsRejectedNum != null && record.goodsRejectedNum != ""){
                return record.goodsRejectedNum;
              }
            }
          },
          {
            title: '采购单价',
            align: "center",
            dataIndex: 'unitPrice',
            customRender:function (text) {
              return text+"元"
            }
          },
          {
            title: '采购金额',
            align: "center",
            dataIndex: 'subtotal',
            customRender:function (text) {
              if (text != null){
                return text+"元"
              }else {
                return "-"
              }
            }
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'remark'
          },
        ],

        url: {
          list: "/ghSupplychainPurchaseOrder/reportList",
          getSearchConditionData: "/ghSupplychainPurchaseOrder/getQueryCriteriaData",
          querySupplierList: "/ghSupplychainSupplier/allList",
          queryDepositoryList: "/ghSupplychainDepository/allList",
          queryUserList: "/sys/user/allList",

          queryPurchaseByOrderNo:"/ghSupplychainPurchaseOrder/queryPurchaseByOrderNo",
        },
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        totalPrice: 0,
        dictOptions: {},
        superFieldList: [],
        currentReceiptsType: 0,
        currentReceiptsDate: '',
        currentOrderStatus: 0,
        receiptsTypeList:[],  //搜索条件：单据类型
        receiptsDateList:[],  //搜索条件：单据时间
        orderStatusList:[],   //搜素条件：订单状态
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        finished: false,
      }
    },
    created() {
      this.initSearchConditionData();
      this.loadUserListData();
      this.loadSupplierData();
      this.loadDepositoryData();
      //this.loadData();
    },
    methods: {
      //加载用户列表
      loadUserListData() {
        getAction(this.url.queryUserList).then((res) => {
          if (res.success) {
            this.purchasePeopleData = res.result.records||res.result;
            this.createByData = res.result.records||res.result;
          }
        })
      },
      //加载供应商
      loadSupplierData(){
        getAction(this.url.querySupplierList).then((res) => {
          if (res.success) {
            this.supplierData = res.result.records||res.result;
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      //加载仓库
      loadDepositoryData(){
        getAction(this.url.queryDepositoryList).then((res) => {
          if (res.success) {
            this.depositoryData = res.result.records||res.result;
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      changeSupplier(value){
        this.loadData(1);
      },
      changeDepository(value){
        this.loadData(1);
      },
      changePurchasePeople(value){
        this.loadData(1);
      },
      changeCreateBy(value){
        this.loadData(1);
      },

      filterOptionSupplier(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOptionDepository(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOptionPurchasePeople(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      filterOptionCreateBy(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      //点击单号显示详情
      purchaseOrderDetail(record){
        getAction(this.url.queryPurchaseByOrderNo, {orderNo: record.receiptsNo}).then((res) => {
          if (res.success) {
            var orderObj = res.result;
            if (orderObj == null){
              this.$message.error("暂无该订单的信息");
              return;
            }else {
              if (record.receiptsType == 2){
                //显示入库单详情
                this.$refs.inDepositoryOrderDetailModal.title = "采购入库订单详情";
                this.$refs.inDepositoryOrderDetailModal.showDetail(orderObj);
              }else if (record.receiptsType == 3){
                //显示退货单详情
                this.$refs.goodsRejectedOrderDetailModal.title = "采购退货订单详情";
                this.$refs.goodsRejectedOrderDetailModal.showDetail(orderObj);
              }
            }
          }
        })
      },

      initSearchConditionData() {
        getAction(this.url.getSearchConditionData).then(res => {
          if (res.success) {
            this.receiptsTypeList = res.result.receiptsTypeList;
            this.receiptsDateList = res.result.receiptsDateList;
            this.orderStatusList = res.result.orderStatusList;
          }
        })
      },
      //单据类型发生变化
      onChangeReceiptsType(key, itemValue){
        for (let i = 0; i < this.receiptsTypeList.length; i++) {
          if (key == this.receiptsTypeList[i].key) {
            this.receiptsTypeList[i].checkedValue = true;
          } else {
            this.receiptsTypeList[i].checkedValue = false;
          }
        }
        this.currentReceiptsType = itemValue;
        this.loadData(1);
      },
      //单据时间发生变化
      onChangeReceiptsDate(key, itemValue){
        for (let i = 0; i < this.receiptsDateList.length; i++) {
          if (key == this.receiptsDateList[i].key) {
            this.receiptsDateList[i].checkedValue = true;
          } else {
            this.receiptsDateList[i].checkedValue = false;
          }
        }
        if (key == 'key9'){
          this.currentKey = true;
        }else {
          this.currentKey = false;
          this.dateValue = [];
          this.currentReceiptsDate = itemValue;
          this.loadData(1);
        }
      },
      //自定义单据时间
      onChangeCustomerReceiptsDate(value, dateString){
        this.startDate = dateString[0];
        this.endDate = dateString[1];
        this.currentReceiptsDate = "customizeTime";
        this.loadData(1);
      },
      //订单状态发生变化
      onChangeOrderStatus(key, itemValue){
        for (let i = 0; i < this.orderStatusList.length; i++) {
          if (key == this.orderStatusList[i].key) {
            this.orderStatusList[i].checkedValue = true;
          } else {
            this.orderStatusList[i].checkedValue = false;
          }
        }
        this.currentOrderStatus = itemValue;
        this.loadData(1);
      },
      onLoadList(e){
        this.ipagination.current++
        this.loadData(this.ipagination.current)
      },
      loadData(arg) {
        //var params = this.model;//查询条件
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
          this.finished = false;
        }
        var params = this.getQueryParams();//查询条件

        if (this.currentReceiptsType != null && this.currentReceiptsType != '' && this.currentReceiptsType != 0) {
          params.receiptsType = this.currentReceiptsType;
        }else {
          params.receiptsType = "";
        }

        if (this.currentReceiptsDate != null && this.currentReceiptsDate != '') {
          params.currentReceiptsDate = this.currentReceiptsDate;
          if (this.currentReceiptsDate == "customizeTime"){
            params.beginTime = this.startDate;
            params.endTime = this.endDate;
          }
        }else {
          params.currentReceiptsDate = "";
        }

        if (this.currentOrderStatus != null && this.currentOrderStatus != '' && this.currentOrderStatus != 0) {
          params.orderStatus = this.currentOrderStatus;
        }else {
          params.orderStatus = "";
        }
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = [...this.dataSource, ...res.result.records]
            this.totalPrice = 0;
            for (let i=0;i<this.dataSource.length;i++){
              this.totalPrice += this.dataSource[i].subtotal;
            }
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
          if(res.result.records.length<10){
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getReceiptsType(text){
        switch (text) {
          case 1:
            return "采购"
          case 2:
            return "采购入库"
          case 3:
            return "采购退货"
          case 4:
            return "其他入库"
          case 5:
            return "其他出库"
          case 6:
            return "调拨单"
        }
      },
      getMaterialNum(record){
        if (record.receivedNum != null && record.receivedNum != ""){
          return record.receivedNum;
        }else if (record.goodsRejectedNum != null && record.goodsRejectedNum != ""){
          return record.goodsRejectedNum;
        }
      }
    },
  }
</script>

<style scoped>
  @import '~@assets/less/common.less';

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:100vh;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>